layui.use(['jquery', 'table', 'form', 'layer'], function(){
    var $ = layui.jquery;
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;

    // 初始化表格
    var tableIns = table.render({
        elem: '#permissionTable',
        url: '/permission/loadAll',
        toolbar: '#permissionToolBar',
        height: 'full-35',
        page: true,
        cols: [[
            {field: 'id', title: 'ID', width: 80, sort: true, align: 'center'},
            {field: 'menuId', title: '菜单ID', width: 100, align: 'center'},
            {field: 'name', title: '权限名称', width: 150, align: 'center'},
            {field: 'code', title: '权限标识', width: 180, align: 'center'},
            {
                field: 'type',
                title: '权限类型',
                width: 120,
                align: 'center',
                templet: function(d){
                    return {
                        'menu': '<span class="layui-badge layui-bg-blue">菜单权限</span>',
                        'button': '<span class="layui-badge layui-bg-green">操作权限</span>',
                        'api': '<span class="layui-badge layui-bg-orange">API权限</span>'
                    }[d.type] || '未知类型';
                }
            },
            {
                field: 'available',
                title: '状态',
                width: 100,
                align: 'center',
                templet: function(d){
                    return d.available == 1
                        ? '<span class="layui-badge layui-bg-blue">可用</span>'
                        : '<span class="layui-badge layui-bg-gray">禁用</span>';
                }
            },
            {fixed: 'right', title: '操作', toolbar: '#permissionRowBar', width: 180, align: 'center'}
        ]],
        done: function(res, curr, count){
            console.log('表格加载完成，数据量：', count);
        }
    });

    // 其他交互逻辑...
});